<template>
    <div class="admin-login-box">
        <!--顶部内容-->
        <div class="admin-login-header-box">
            <div class="admin-login-header-center center">
                <div class="admin-login-logo">
                    博客系统 | 登录
                </div>
            </div>
        </div>

        <!--        中间内容-->

        <div class="admin-login-center-box">
            <div class="center login-center-box">
                <div style="margin: 20px;"></div>

                <el-row :gutter="20">
                    <el-col :span="14">
                        <el-form label-position="right" label-width="80px">
                            <el-form-item label="名字" :required="true">
                                <el-input v-model="sobUser.userName" placeholder="输入用户名"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" :required="true">
                                <el-input v-model="sobUser.password" placeholder="输入密码" show-password></el-input>
                            </el-form-item>
                            <el-form-item label="验证码" :required="true">
                                <el-input v-model="loginInfo.captcha" placeholder="输入验证码"
                                          @keyup.enter.native="doLogin"></el-input>

                                <img :src="captchaPath" alt="获取验证码失败"
                                     @click="updateVerifyCode"
                                     class="captcha-code-cursor">
                            </el-form-item>
                            <el-form-item>
                                <el-button size="medium" type="primary" @click="doLogin">登录</el-button>
                            </el-form-item>
                        </el-form>

                    </el-col>
                </el-row>

            </div>
        </div>
    </div>
</template>

<script>
import {success_code} from "@/utils/ResponseState";
import {doLogin} from "@/api/userApi";
import {hex_md5} from "@/utils/md5";

export default {
    name: "index.vue",

    data() {
        return {
            loginInfo: {
                captcha: '',
                verifyCode: ''
            },
            sobUser: {
                userName: '',
                password: ''
            },
            captchaPath: '',
            captchaKey: 0
        };
    },
    methods: {
        // init listener
        // 点击登录的方法
        doLogin() {
            // check env
            if (this.sobUser.userName === "") {
                this.$message({
                    message: "用户名不能为空",
                    center: true,
                    type: 'error'
                })
                return;
            }

            const sobUser = this.sobUser;

            if (this.sobUser.password !== "") {
                if (this.sobUser.password.length < 6) {
                    this.$message.warning("密码至少6位");
                    return;
                } else {
                    sobUser.password = hex_md5(this.sobUser.password);
                }
            }

            if (this.loginInfo.captcha === "") {
                this.$message({
                    message: "人类验证码不能为空",
                    center: true,
                    type: 'error'
                })
                return;
            }

            // change net state
            doLogin(this.loginInfo.captcha, this.captchaKey, sobUser).then(response => {
                // check data
                // success state: role_guest go the portal page, role_admin go the manage page
                // defeat state: show the server's message
                if (response.code === success_code) {
                    this.$message({
                        message: response.message,
                        center: true,
                        type: 'success'
                    })
                    //  需要管理员判断
                    this.$router.push('/index');
                } else {
                    this.$message({
                        message: response.message,
                        center: true,
                        type: 'error'
                    })
                }
            });

        },
        // 点击切换验证码
        updateVerifyCode() {
            // 为节约资源 一直使用一个时间戳
            // 只有单人系统才能这么做
            // 但是会导致url 一直一样， vue 不会修改界面
            // 所以添加了一个随机参数 来改变url
            this.captchaPath = "/user/captcha?captcha_key=" + this.captchaKey + "&random=" + Date.parse(new Date());
        }
    },
    mounted() {
        // init data
        this.captchaKey = Date.parse(new Date())
        this.updateVerifyCode()
    }
}
</script>

<style scoped>
.admin-login-header-box {
    width: 100%;
    height: 46px;
    background-color: dodgerblue;
}

.admin-login-header-center {
    line-height: 46px;
}

.admin-login-logo {
    color: #ffffff;
    font-weight: 600;
    font-size: 20px;
}

.center {
    margin: 0 auto;
    width: 1140px;
}

.login-center-box {
    padding: 10px;
    width: 1140px;
    background-color: white;
    box-shadow: 0 1px 10px #afafaf;
    border-radius: 4px;
}

.captcha-code-cursor {
    cursor: pointer;
    width: 80px;
    height: 38px;
    vertical-align: center;
    margin-left: 10px;
}

.login-center-box >>> .el-input__inner {
    width: 65%;
}
</style>